<style>
    .jOrgChart .node{
        /*writing-mode:tb-rl !important;*/
        width:  27px ;
        height: 210px ;
        text-align: center;
        background-color: white ;
        font-size: 13px;
        border-radius: 0px;
        border: 3px solid black;
        background-color:#CC9966;
    }
    .jOrgChart > table{
        width: 100%;
    }
    .node-container > table{
        width: 100%;
    }
</style>
<script>
    window.onload =function () {
        prettyPrint();
       $($(".node")[0]).attr('style','width:160px;height:30px;line-height:22px;');
    }
</script>

<ul id="org" style="display: none">
    <li>
        <div >学海教育科技有限公司</div>
        <ul>
            {% for index,row in data %}
                <li><span title="{{ '联系电话：'~row['sSelfPhone'] }}" >{{ row['text'] ~'<br><br>'~row['sStaffName'] }}</span>
                {% if row['child'] is defined %}
                    <ul>
                        {% for key,values in row['child'] %}
                        <li>
                            <span title="{{ '联系电话：'~values['sSelfPhone'] }}" >{{ values['text'] ~'<br><br>'~values['sStaffName'] }}</span>
                            {% if values['child'] is defined %}
                                <ul>
                                    {% for  it,val in values['child']   %}
                                        <li>
                                            <span title="{{ '联系电话：'~val['sSelfPhone'] }}" >{{ val['text'] ~'<br><br>'~val['sStaffName'] }}</span>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                {% endif %}
                </li>
            {% endfor %}
        </ul>
    </li>
</ul>

<div id="chart" class="orgChart"></div>

